import React from 'react'
import { Redirect, withRouter } from 'react-router-dom'
import request from '@/utils/request'

export function withUser(InnerComponent) {
	//接收组件作为函数，并返回一个新的组件
	return function OuterComponent(props) {
		console.log('OuterComponent', props)
		let userInfo = localStorage.getItem('userInfo')
		try {
			userInfo = JSON.parse(userInfo) || {}
		} catch (err) {
			userInfo = {}
		}
		return <InnerComponent userInfo={userInfo} {...props}></InnerComponent>
	}
}

// export function withStorage(key){
//     // hoc才是高阶组件
//     return function hoc(InnerComponent){
//         return function OuterComponent(props){
//             let value = localStorage.getItem(key)
//             try{
//                 value = JSON.parse(value);
//             }catch(err){
//                 value = value
//             }
//             // props[key] = value;
//             const data = {
//                 [key]:value
//             }
//             // data[key] = value;
//             return <InnerComponent {...data} {...props}></InnerComponent>
//         }
//     }
// }

// 增强版withStorage
export function withStorage(...keys) {
	// hoc才是高阶组件
	return function hoc(InnerComponent) {
		return function OuterComponent(props) {
			const data = {}
			keys.forEach((key) => {
				let value = localStorage.getItem(key)
				try {
					value = JSON.parse(value)
				} catch (err) {
					value = value
				}
				data[key] = value
			})
			return <InnerComponent {...data} {...props}></InnerComponent>
		}
	}
}

// 使用
// withStorage('userInfo',Home);
// 函数柯里化：
// withStorage('userInfo')(Home)
// withStorage('token')(Home)

// 定义高阶组件方式二：反向继承
// 只适用于类组件
// export function withAuth(InnerComponent) {
// 	class OuterComponent extends InnerComponent {
// 		componentDidMount() {
// 			super.componentDidMount()
// 		}
// 		render() {
// 			// super: 父类（Mine）
// 			console.log('OuterComponent.props', this.props)
// 			return this.props.userInfo.authorization ? (
// 				super.render()
// 			) : (
// 				<Redirect to="/login" />
// 			)
// 			// <div>
// 			//     只有登录后才能访问
// 			// </div>
// 		}
// 	}

// 	OuterComponent = withUser(OuterComponent)

// 	return OuterComponent
// }

// export function withAuth(InnerComponent) {
// 	let xx = getuserInfo()

// <<<<<<< HEAD
// 	return function OuterConponent(props) {
// 		console.log('withAuth=====', props)
// 		return xx ? (
// 			<InnerComponent {...props}></InnerComponent>
// 		) : (
// 			<Redirect to="/reg" />
// 		)
// 	}
// }
// export function withAuth(InnerComponent) {
// 	function OuterConponent(props) {
// 		console.log('withAuth=====', props)
// 		return props.userInfo ? (
// 			<InnerComponent {...props}></InnerComponent>
// 		) : (
// 			<Redirect to="/reg" />
// 		)
// 	}
// 	OuterConponent = withUser(OuterConponent)
// 	return OuterConponent
// }
// // withAuth(Mine)
// =======
// 使用属性代理方式实现用户访问权限控制
export function withLogin(InnerComponent) {
	function OuterComponent(props) {
		// 判断用户是否登录
		console.log('token==', props)
		if (props.userInfo.token) {
			// 校验token有效性（是否过期，是否被篡改）
			request
				.get('/users/verify', {
					headers: {
						token: props.userInfo.token,
					},
				})
				.then(({ data }) => {
					if (data.code === 400) {
						props.history.push({
							pathname: '/login',
							search: 'targetUrl=' + props.location.pathname,
						})
					}
				})
			return <InnerComponent {...props}></InnerComponent>
		} else {
			return <Redirect to="/login" />
		}
	}

	OuterComponent = withUser(OuterComponent)
	OuterComponent = withRouter(OuterComponent)

	return OuterComponent
}

// withAuth(Mine)
// >>>>>>> 99cecaea0d1bf74add27e8ff9e0432854fe61c8d
